<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- V：view，视图 -->
  <div id="app">
    <!-- 1、操作dom元素的内容的 -->
    <div id="div01">{{ str }}</div>
    <div v-text="str"></div>
    <div v-html="str"></div>

    <!-- 2、修改dom元素属性的 -->
    <img v-bind:src="img">

    <img :src="img">
    <img v-bind:[attr]="img">

    <!-- 3、给dom元素绑定事件 -->
    <input type="button" value="按钮01" v-on:click="clickHandle" />
    <input type="button" value="按钮01" @click="clickHandle" />

    <!-- 4、针对样式属性（class，style）的加强
            给class和style属性赋的值 可以是字符串，也可以是数组，对象 -->
    <p :style="s"> 我是个p1 </p>
    <p :style="sObj"> 我是个p2 </p>
    <p :style="[o1,o2]"> 我是个p3 </p>


    <!-- 5、条件渲染：操作元素的显示和隐藏 -->
    <p v-if="score>=150">大神</p>
    <p v-show="score>145">中神</p>
    <p>小神</p>
    <p>学霸</p>


    <!-- 6、列表渲染：循环 -->
    <ul>
      <li v-for="(item,index) in musics" :key="item.id">
        <p>编号：{{ item.id }}</p>
        <p>歌名：{{ item.name }}</p>
      </li>
    </ul>
    <!-- 循环字符串 -->
    <p>循环字符串：</p>
    <ul>
      <li v-for="(char,index) in desc" :key="index">
        {{ index }}------{{ char }}
      </li>
    </ul>

    <!-- 循环数字 -->
    <p>循环数字</p>
    <ul>
      <li v-for="(n,idx) in count" :key="" idx>
        {{ n }}
      </li>
    </ul>

    <div v-pre>
      <p>1</p>
      <p>2</p>
      <p>3</p>
      <p>4</p>
      <p>5</p>
      <p>{{ str }}</p>
    </div>

    <!-- v-once：vue对该标签只做一次的渲染。 -->
    <p v-once>str:{{ str }}</p>
    <input type="button" value="修改str" @click="changeStr">
  </div>
  <script src="./js/vue.js"></script>

  <script>
    let vm = new Vue({
      el: "#app", // el: element
      data: {
        str: "hehe",
        img: "./imgs/01.jpg",
        attr: "src",
        s: "width:100px; heigth:100px",
        sObj: {
          width: "100px",
          height: "100px"
        },
        o1: {
          width: "100px",
          height: "100px"
        },
        o2: {
          backgroundColor: "red"
        },
        score: 155,
        musics: [
          {
            id: "001",
            name: "好运来"
          },
          {
            id: "002",
            name: "荷塘月色"
          }
        ],
        desc: "how are you",
        count: 10
      },
      methods: {
        fn: function () {
          this.str += "b";
        },
        clickHandle() {

        },
        changeStr() {
          this.str += "c"
        }
      }
    });

    // 原生 js 中，操作 dom 时，
    let div01 = document.getElementById("div01")

    div01.innerHTML = "dddd";
    div01.id = "007";
    div01.style.width = "100px";
    div01.onclick = function () {

    }
  </script>
</body>

</html>